<?php if (!defined('THINK_PATH')) exit();?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo ($title); ?></title>
    <link href="/Public/Static/css/bootstrap.min.css-v=3.3.5.css" rel="stylesheet">
    <link href="/Public/Static/css/font-awesome.min.css-v=4.4.0.css" rel="stylesheet">
    <link href="/Public/Static/css/animate.min.css" rel="stylesheet">
    <link href="/Public/Static/css/style.min.css-v=4.0.0.css" rel="stylesheet">
    <link rel="stylesheet" href="/Public/Home/css/style.css"/>
    <style>
        body{background: url("/Public/Home/images/login_bg.jpg") no-repeat;background-size: 100% 100%;padding-top: 4%;}
        .logo-name{color: #fff;font-size: 130px;text-align: center;}
        .loginscreen.middle-box{width: 700px; height: 300px; background: rgba(255,255,255,0.5)!important;padding: 20px;border-radius: 5px;}
        .middle-box{max-width: 900px;}
        .input-group-addon{padding: 6px 22px;}
        .leftbox{border-right: 1px solid #bbb;}
        .fa{font-size: 18px;}
    </style>
</head>

<body class="gray-bg">
<div class="animated fadeInDown"><p class="logo-name">SR</p></div>
<div class="middle-box loginscreen animated fadeInDown">
    <div class="row">
        <div class="col-xs-6 leftbox">
            <form class="m-t login_form" role="form" action="<?php echo U('');?>" method="post">
                <div class="form-group">
                    <input type="text" id="username1" name="username" class="form-control" placeholder="用户名" required="">
                </div>
                <div class="form-group">
                    <input type="password" id="password1" name="password" class="form-control" placeholder="密码" required="">
                </div>

                <div id="embed-captcha"></div>
                <p id="wait" class="show">正在加载验证码......</p>
                <p id="notice" class="hide">请先拖动验证码到相应位置</p>

                <br>
                <button type="submit" id="embed-submit" class="btn btn-primary block full-width m-b">登 录</button>


                <p class="text-muted text-center"> <a href="login.html#">
                    <small>忘记密码了？</small></a>
                </p>

            </form>
        </div>
        <div class="col-xs-6">
            <div class="m-t h4">使用其他方式一键登录？</div>
            <div class="m-t">
                <a href="" class="btn btn-info btn-block">
                    <i class="fa fa-weixin"> </i> 微信账号登录
                </a>
            </div>
            <div class="m-t">
                <a href="" class="btn btn-success btn-block">
                    <i class="fa fa-qq"> </i> QQ账号登录
                </a>
            </div>
            <p class="m-t">还没有账号？ <a href="<?php echo U('register');?>">马上注册</a></p>
        </div>

    </div>
</div>
<script src="/Public/Static/js/jquery.min.js-v=2.1.4.js"></script>
<script src="/Public/Static/js/bootstrap.min.js-v=3.3.5.js"></script>
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://static.geetest.com/static/tools/gt.js"></script>
</body>

</html>
<script>
    var handlerEmbed = function (captchaObj) {
        $("#embed-submit").click(function (e) {
            var validate = captchaObj.getValidate();
            if (!validate) {

                $("#notice")[0].className = "show";
                setTimeout(function () {
                    $("#notice")[0].className = "hide";
                }, 2000);
                e.preventDefault();

            }else{
                //登录操作
                $(".login_form").submit(function () {
                    var self = $(this);
                    $.post(self.attr("action"), self.serialize(), success, "json");
                    return false;
                    function success(data){
                        console.log(data);
                        if(data.status){
                            window.location.href = data.url;
                        } else {
                            captchaObj.refresh();
                            $("#notice").html(data.info);
                            $("#notice")[0].className = "show";
                            setTimeout(function () {
                                $("#notice")[0].className = "hide";
                            }, 2000);
                        }
                    }
                })
            }

        });

        // 将验证码加到id为captcha的元素里，同时会有三个input的值：geetest_challenge, geetest_validate, geetest_seccode
        captchaObj.appendTo("#embed-captcha");
        captchaObj.onReady(function () {
            $("#wait")[0].className = "hide";
        });
        // 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html
    };
    $.ajax({
        // 获取id，challenge，success（是否启用failback）
        url: "<?php echo U('yanzenma');?>"+"?t=" + (new Date()).getTime(), // 加随机数防止缓存
        type: "get",
        dataType: "json",
        success: function (data) {
            // 使用initGeetest接口
            // 参数1：配置参数
            // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件
            initGeetest({
                gt: data.gt,
                challenge: data.challenge,
                product: "float", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效
                offline: !data.success // 表示用户后台检测极验服务器是否宕机，一般不需要关注
                // 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config
            }, handlerEmbed);
        }
    });
</script>